<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
 <script src="https://cdn.highcharts.com.cn/highmaps/highmaps.js"></script>
 <script src="https://cdn.highcharts.com.cn/highcharts/modules/drilldown.js"></script>
 <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
</head>
<body>
<!--
*************************************************************************
   Generated by JShare at 2021-07-19 11:43:55
   From: https://jshare.com.cn/highmaps/FSSm7A
*************************************************************************
 -->
 <div id="container" style="height:600px;"></div>

 <script>
 (H => {
 if(H.geojson) {
  console.log(H.geojson.features)
  H.geojson = function (geojson, hType, series) {
   var mapData = [], path = [], polygonToPath = function (polygon) {
    polygon.forEach(function (point, i) {
     // fixed 
     point = [point[0]*0.75, point[1] ];
     if (i === 0) {
      path.push(['M', point[0], -point[1]]);
     }
     else {
      path.push(['L', point[0], -point[1]]);
     }
    });
   };
   hType = hType || 'map';
   geojson.features.forEach(function (feature) {
    var geometry = feature.geometry, type = geometry.type, coordinates = geometry.coordinates, properties = feature.properties, point;
    path = [];
    if (hType === 'map' || hType === 'mapbubble') {
     if (type === 'Polygon') {
      coordinates.forEach(polygonToPath);
      path.push(['Z']);
     }
     else if (type === 'MultiPolygon') {
      coordinates.forEach(function (items) {
       items.forEach(polygonToPath);
      });
      path.push(['Z']);
     }
     if (path.length) {
      point = { path: path };
     }
    }
    else if (hType === 'mapline') {
     if (type === 'LineString') {
      polygonToPath(coordinates);
     }
     else if (type === 'MultiLineString') {
      coordinates.forEach(polygonToPath);
     }
     if (path.length) {
      point = { path: path };
     }
    }
    else if (hType === 'mappoint') {
     if (type === 'Point') {
      point = {
       x: coordinates[0],
       y: -coordinates[1]
      };
     }
    }
    if (point) {
     mapData.push(H.extend(point, {
      name: properties.name || properties.NAME,
      /**
                         * In Highmaps, when data is loaded from GeoJSON, the GeoJSON
                         * item's properies are copied over here.
                         *
                         * @requires modules/map
                         * @name Highcharts.Point#properties
                         * @type {*}
                         */
      properties: properties
     }));
    }
   });
   // Create a credits text that includes map source, to be picked up in
   // Chart.addCredits
   if (series && geojson.copyrightShort) {
    series.chart.mapCredits = H.format(series.chart.options.credits.mapText, { geojson: geojson });
    series.chart.mapCreditsFull = H.format(series.chart.options.credits.mapTextFull, { geojson: geojson });
   }
   return mapData;
  };
 }
})(Highcharts);
Highcharts.setOptions({
 lang: {
  drillUpText: '< 返回 “{series.name}”'
 }
});
var map = null,
 geochina = 'https://geojson.cn/data/',
 getGeoJSON = function(code, callback) {
  $.getJSON(geochina + code + '.json', function(geojson) {
   callback(geojson);
  }, function(err) {
   console.log(err);
  });
 },
 createMap = function(mapdata) {
  var data = [];
  // 随机数据
  Highcharts.each(mapdata.features, function(md, index) {
   // 南海诸岛标识不需要填充数据
   if(md.properties.name === '南海诸岛') {
    return;
   }
   var tmp = {
    name: md.properties.name,
    value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
   };
   if(md.properties.filename) {
    tmp.drilldown = md.properties.filename;
   }
   if(md.properties.offset){
    md.properties['hc-middle-x'] = md.properties.offset[0];
    md.properties['hc-middle-y'] = md.properties.offset[1];
   }
   data.push(tmp);
  });
  map = new Highcharts.Map('container', {
   chart: {
    events: {
     drilldown: function(e) {
      drilldown(e);
     },
     drillup: function(e) {
      map.setTitle({
       text: e.seriesOptions.name
      });
     }
    }
   },
   title: {
    text: '中国地图'
   },
   subtitle: {
    useHTML: true,
    text: '点击查看 <a href="https://www.hcharts.cn/mapdata" target="_blank">地图数据及详情</a>，注意县级数据为收费数据，如果您有需要，请 <a href="https://highcharts.com.cn/data" target="_blank">联系我们购买</a>'
   },
   mapNavigation: {
    enabled: true,
    buttonOptions: {
     verticalAlign: 'bottom'
    }
   },
   plotOptions: {
    map: {
     borderColor: '#555',
     borderWidth: 0.5,
    } 
   },
   tooltip: {
    useHTML: true,
    headerFormat: '<table><tr><td>{point.name}</td></tr>',
    pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
    '<tr><td>名称</td><td>{point.properties.name}</td></tr>'+
    '<tr><td>行政编号</td><td>{point.properties.code}</td></tr>' +
    '<tr><td>经纬度</td><td>{point.properties.center}</td></tr>' ,
    footerFormat: '</table>'
   },
   legend: {
    enabled: false
   },
   series: [{
    data: data,
    mapData: mapdata,
    joinBy: 'name',
    name: '中国',
    dataLabels: {
     enabled: true,
     format: '{point.name}',
     style: {
      fontSize: '10px'
     }
    },
    states: {
     hover: {
      color: '#a4edba'
     }
    }
   }]
  });
 },
 drilldown = function(event) {
  map.tooltip.hide();
  // 异步下钻
  if (event.point.drilldown) {
   var pointName = event.point.properties.fullname;
   map.showLoading('下钻中，请稍后...');
   getGeoJSON(event.point.drilldown, data => {
    data = Highcharts.geojson(data);
    Highcharts.each(data, function(d) {
     if(d.properties.filename) {
      d.drilldown = d.properties.filename;
     }
     if(d.properties.offset){
      d.properties['hc-middle-x'] = d.properties.offset[0];
      d.properties['hc-middle-y'] = d.properties.offset[1];
     }
     d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
    });
    map.hideLoading();
    map.addSeriesAsDrilldown(event.point, {
     name: event.point.name,
     data: data,
     dataLabels: {
      style: {
       fontSize: '10px'
      },
      enabled: true,
      format: '{point.name}'
     }
    });
    map.setTitle({
     text: pointName
    });
   })
  }
 };
getGeoJSON('china', function(geojson) {
 createMap(geojson);
});
</script>
</body>
</html>